import React from 'react'
import { View, StyleSheet, Text, Keyboard, TextInput } from 'react-native'
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import { CommonToast } from 'src/utils/ToastUtil'
import BasePage from 'src/pageP/base/base-page/index'
import CustomButton from 'src/components/button/CustomButton'
import { showTipModal } from 'src/utils/ModalUtil'

export default class CommonInputPage extends BasePage {
  constructor(props) {
    super(props)
    const {
      navigation: { state: { params = {} } = {} }
    } = this.props
    const { value: editValue = '', regexp } = params
    this.state = {
      header: {},
      editValue,
      pnyin: '',
      count: editValue.length,
      checked: regexp // 校验结果
        ? regexp.test(editValue)
        : editValue && editValue.length
    }
    this.params = params
    this.scrollEnabled = true
    this.onChangeText = this.onChangeText.bind(this)
  }

  childRender() {
    const { editValue, count } = this.state
    const {
      title,
      desc,
      placeholder,
      maxLength = 0,
      keyboardType = 'default',
      returnKeyType,
      multiline = false,
      inputTextStyle = {}
    } = this.params
    return (
      <KeyboardAwareScrollView
        innerRef={this.scrollViewRef}
        style={styles.container}
        keyboardShouldPersistTaps="handled"
        enableOnAndroid={true}
        scrollEnabled={this.scrollEnabled}
      >
        <Text style={styles.titleLabel}>{title}</Text>
        <View style={styles.tipView}>
          <Text style={styles.leftTip}>{desc}</Text>
          <Text style={styles.rightText}>
            {count}/{maxLength}
          </Text>
        </View>
        <TextInput
          style={[styles.textInput, inputTextStyle]}
          value={editValue}
          selectionColor="#FED201"
          autoCorrect={false}
          autoFocus={true}
          placeholder={placeholder}
          clearButtonMode="while-editing"
          onChange={this.onChange}
          keyboardType={keyboardType}
          enablesReturnKeyAutomatically={!multiline}
          returnKeyType={returnKeyType || (!multiline ? 'done' : returnKeyType)}
          multiline={multiline}
          onSubmitEditing={!multiline ? this.onSubmitEditing : null}
        />
        {this.renderBottomView()}
      </KeyboardAwareScrollView>
    )
  }

  renderBottomView() {}

  renderNavigationBarChild() {
    const { checked } = this.state
    return (
      <CustomButton style={styles.saveBtn} onPress={this.onSave}>
        <Text style={[styles.saveText, checked && styles.saveTextEnable]}>
          保存
        </Text>
      </CustomButton>
    )
  }

  onSubmitEditing = () => {
    this.onSave()
  }

  onSave = () => {
    Keyboard.dismiss()
    const {
      navigation: {
        goBack,
        state: {
          params: { title, saveCallback, blockReg, maxLength, phoneReg }
        }
      }
    } = this.props
    const { editValue, pinyin, checked } = this.state
    if (pinyin) {
      return
    }
    if (editValue.length > maxLength) {
      CommonToast(`字数超过限制`)
      return
    }
    if (!checked) {
      CommonToast(`请输入有效的${title}`)
      return
    }
    if (
      phoneReg &&
      phoneReg === '手机号验证' &&
      /1[3456789]\d{9}/.test(editValue)
    ) {
      // CommonToast(`不能填写联系方式`)
      this.blockPop(editValue.match(/1[3456789]\d{9}/g))
      return
    }
    if (blockReg && blockReg.test(editValue)) {
      // CommonToast(`输入内容包含不合法信息`)
      this.blockPop(editValue.match(blockReg))
      return
    }
    saveCallback && saveCallback(editValue)
    goBack && goBack()
  }

  onChange = ({ nativeEvent: { pinyin = '', text: editValue } }) => {
    console.log('nativeEvent', 'pinyin', pinyin, '\neditValue', editValue)
    if (pinyin === '') {
      const { regexp, maxLength } = this.params
      if (editValue.length > maxLength) {
        editValue = editValue.substr(0, maxLength)
      }
      this.setState(
        {
          editValue,
          pinyin,
          count: editValue.length,
          checked: regexp ? regexp.test(editValue) : editValue.length > 0
        },
        () => {
          this.onChangeText(editValue)
        }
      )
    } else {
      this.setState(
        {
          editValue,
          pinyin
        },
        () => {
          this.onChangeText(editValue)
        }
      )
    }
  }

  onChangeText() {}

  unique5(arr) {
    var x = new Set(arr)
    return [...x]
  }

  blockPop(list = []) {
    this.tipPrompModal = showTipModal({
      titleText: '提示',
      contentText: `您输入的内容包含屏蔽字:${this.unique5(list).reduce(
        (a, b) => a + ',' + b
      )};请重新编辑`,
      confirmText: '确定',
      cancelText: '',
      onCancel: () => {
        this.tipPrompModal.close(() => {
          this.tipPrompModal = null
        })
      },
      onConfirm: () => {
        this.tipPrompModal.close(() => {
          this.tipPrompModal = null
        })
      }
    })
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  saveBtn: {
    alignSelf: 'flex-end',
    marginRight: ScaleS(20)
  },
  saveText: {
    color: '#bbbbbb',
    fontSize: ScaleT(16),
    fontWeight: '400',
    paddingVertical: ScaleS(5),
    paddingLeft: ScaleS(5)
  },
  saveTextEnable: {
    color: '#000000'
  },
  titleLabel: {
    color: '#444444',
    fontSize: ScaleT(27),
    fontWeight: '500',
    marginTop: ScaleS(30),
    marginLeft: ScaleS(20)
  },
  tipView: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: ScaleS(18),
    marginHorizontal: ScaleS(20)
  },
  leftTip: {
    flex: 1,
    color: '#999999',
    fontSize: ScaleT(14),
    fontWeight: '400'
  },
  rightText: {
    color: '#FFC200',
    fontSize: ScaleT(14),
    fontWeight: '600'
  },
  textInput: {
    marginTop: ScaleS(16),
    paddingVertical: ScaleS(26),
    marginHorizontal: ScaleS(20),
    color: '#444444',
    fontSize: ScaleT(16),
    fontWeight: '400'
  }
})
